﻿<!-- 继承公共视图文件 -->
<!-- 方法一：-->
<!-- <extend name="./Application/Admin/View/layout.html" /> -->
<!-- 方法二：-->
<extend name="Public:layout" />
<block name="mid">

<div class="row">
	<div class="col-md-6">
		<div class="panel">
			<div class="panel-heading bk-bg-primary">
				<h6><i class="fa fa-indent red"></i>角色添加</h6>
			</div>
			<div class="panel-body">
			<!-- action=""没有值 ，则默认提交到当前路径-->
				<form id="signupForm" action="" method="post" class="form-horizontal ">
					<div class="form-group">
	                    <label class="col-md-2 control-label" for="text-input">角色名称</label>
	                    <div class="input-group">
	                        <input id="adminName" name="title" class="form-control" placeholder="请输入名称" type="text">
	                        <span class="input-group-addon"><i class="fa fa-user"></i></span>
	                    </div>
	                </div>
	                 <div class="form-group">
	                </div>
						<div class="form-group">
							<label class="col-md-2 control-label">状态</label>
							<div class="input-group col-md-9">
								<div class="radio-custom radio-inline">
									<input id="radio1" name="status" value="1" type="radio" >
									<label for="inline-radio1">启用</label>
								</div>
								<div class="radio-custom radio-inline">
									<input id="radio2" name="status"  value="0" type="radio">
									<label for="inline-radio2">禁用</label>
								</div>
							</div>
						</div>
					<button type="submit" class="bk-margin-5 btn btn-success">提交</button>

					<div class="row">

					<foreach name="top_nav" item="v">

						<div class="col-md-12">

							<div class="toggle" data-plugin-toggle="">
								<div class=" active">
									<div id="selec" class="checkbox-custon checkbox-inline">
										<input id="inline-checkbox{$v.id}" name="rules[]" type="checkbox"  value="{$v.id}">
										<label for="inline-checkbox{$v.id}">{$v.title}</label>
									</div>
									<div class="toggle-content" style="display: block;">
										<div class="form-group">
											<div class="input-group col-md-9">
												<foreach name="rule" item="vo">
													<eq name="v['id']" value="$vo['pid']">
														<div class="checkbox-custon checkbox-inline">
															<input id="inline{$vo.id}" name="rules[]" type="checkbox"  value="{$vo.id}">
															<label for="inline{$vo.id}">{$vo.title}</label>
														</div>
													</eq>
												</foreach>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</foreach>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

</block>

<block name="js">

	<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 必须在引入jq文件之前引入 -->
	<script src="__ADMIN__assets/js/jquery.validate.min.js"></script>
	<script src="__ADMIN__assets/js/pages/ui-elements.js"></script>


	<script  type="text/javascript"r>
// 	$(function(){
// 		$('#selec :checkbox').click(function() {
// 				//通过自己$(this)找到父级标签parent()，在父级标签的基础上，找到为选中状态的父级复选框，得到其长度
// 				var len=$(this).find(':checkbox:checked').length;
// 				if(len>0){//长度大于0，则子级选中
// 					$(this).parent().next().find(':checkbox').prop('checked', true);
// 				}else{//长度小于0，则子级取消选中
// 					$(this).parent().next().find(':checkbox').prop('checked', false);
// 				}
// 			})

// 		//勾选子级父级要选中,与勾选父级的时候子级全部选中的思路是一样的
// 		//如果所有子级都不选中了那么父级也就不选中？
// 		//解决：获取当前点击的对象的所有同级对象包括自己，然后筛选出选中的input标签然后得到长度。如果长度大于0则让父级选中否则父级不选中。
// 		$('.panel-body :checkbox').click(function() {
// 			var len=$(this).parent().find(':checkbox:checked').length;
// 			if(len>0){
// 				$(this).parent().parent().prev().find(':checkbox').prop('checked', true);
// 			}else{
// 				$(this).parent().parent().prev().find(':checkbox').prop('checked', false);
// 			}
// 		});
// 	})

// /*jq实现全选反选*/
// 	/*全选*/
// 	$("#selectAll").click(function () {
//    		$("input[name='power[]']").prop("checked", true);
// 	});
// 	/*反选*/
// 	$("#reverse").click(function () {
// 	    $("input[name='power[]']").each(function () {
// 	        $(this).prop("checked", !$(this).prop("checked"));
// 	    });
// 	});

</script>
</block>
